<template>
    <div class="hot-city-container-box">
        <div class="hot-title">{{ title }}</div>
        <div class="hot-list-container-com" v-if="list?.length">
            <div class="hot-item" v-for="item in list" :key="item?.id">
                <nut-button @click="clickItem(item)" v-if="item?.cityName" shape="square" type="default" size="small" block
                    style="border-radius: 6px;">{{ item?.cityName }}</nut-button>
                <div style="font-size: 16px;" v-else>暂无</div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { toRefs } from 'vue';
const emit = defineEmits(['clickItem'])
const props = defineProps({
    list: Array,
    title: String
})
const { list } = toRefs(props)
const clickItem = (item) => {
    emit('clickItem', item)
}
</script>
<style lang="less">
.hot-city-container-box {
    .hot-title {
        font-size: 22px;
        color: #858a99;
        margin-top: 10px;
    }

    .hot-list-container-com {
        // background-color: pink;
        margin-top: 20px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        /* Set 3 columns with equal width */
        gap: 15px;
        /* Adjust the gap between grid items */

        .hot-item {
            display: inline-block;
            padding: 0;
        }
    }
}
</style>